<template>
  <div class="card content-box">
    <div class="table-box">
      <ProTable ref="proTable" :columns="columns" :request-api="getTableList">
        <!-- 表格 header 按钮 -->
        <template #tableHeader="scope">
          <el-button v-auth="'job:job:save'" type="primary" :icon="CirclePlus" @click="onSave">新增定时任务</el-button>
          <el-button
            v-auth="'job:job:delete'"
            type="danger"
            :icon="Delete"
            plain
            :disabled="!scope.isSelected"
            @click="batchDelete(scope.selectedListIds)"
          >
            批量删除
          </el-button>
        </template>
        <!-- 菜单操作 -->
        <template #operation="scope">
          <el-button v-auth="'job:job:update'" type="primary" link :icon="EditPen" @click="onUpdate(scope.row)">编辑</el-button>
          <el-button v-auth="'job:job:run'" type="warning" link :icon="Pointer" @click="onRun(scope.row)">执行一次</el-button>
          <el-button
            v-auth="'job:job:pause'"
            v-show="scope.row.status === 0"
            type="info"
            link
            :icon="TurnOff"
            @click="onPause(scope.row)"
          >
            暂停任务
          </el-button>
          <el-button
            v-auth="'job:job:resume'"
            v-show="scope.row.status === 1"
            type="info"
            link
            :icon="TurnOff"
            @click="onResume(scope.row)"
          >
            恢复任务
          </el-button>
          <el-button v-auth="'job:job:delete'" type="danger" link :icon="Delete" @click="onDelete(scope.row)">删除</el-button>
        </template>
      </ProTable>
      <JobOperateDrawer ref="drawerRef"></JobOperateDrawer>
    </div>
  </div>
</template>

<script setup lang="ts">
import { CirclePlus, Delete, EditPen, Pointer, TurnOff } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { deleteJob, getJobPage, JobPageResult, pauseJob, resumeJob, runJob, saveJob, updateJob } from "@/api/modules/job/Job";
import { ref } from "vue";
import JobOperateDrawer from "@/views/job/JobOperateDrawer.vue";
import { useHandleData } from "@/hooks/useHandleData";
import { getEnumDictItem } from "@/api/modules/sys/dict";

// 表格配置项
const columns: ColumnProps[] = [
  { type: "selection", fixed: "left", width: 70 },
  { prop: "id", label: "定时任务id", width: 200 },
  {
    prop: "beanName",
    label: "beanName",
    search: { el: "input", tooltip: "beanName" }
  },
  {
    prop: "params",
    label: "执行参数"
  },
  {
    prop: "cronExpression",
    label: "cron表达式"
  },
  {
    prop: "status",
    label: "任务状态",
    tag: true,
    enum: () => getEnumDictItem("ScheduleJobStatus"),
    search: { el: "select-v2", tooltip: "任务状态" }
  },
  {
    prop: "remark",
    label: "备注"
  },
  {
    prop: "createTime",
    label: "创建时间"
  },
  {
    prop: "updateTime",
    label: "更新时间"
  },
  { prop: "operation", label: "操作", fixed: "right", width: 350 }
];

const proTable = ref<ProTableInstance>();

const getTableList = param => {
  return getJobPage(param);
};

const drawerRef = ref<InstanceType<typeof JobOperateDrawer> | null>(null);

const onSave = () => {
  drawerRef.value?.openDrawer({
    title: "新增",
    isSave: true,
    isUpdate: false,
    row: {},
    api: saveJob,
    getTableList: proTable.value?.getTableList,
    enumMap: proTable.value?.enumMap
  });
};

const onUpdate = (row: Partial<JobPageResult> = {}) => {
  drawerRef.value?.openDrawer({
    title: "更新",
    isSave: false,
    isUpdate: true,
    row: { ...row },
    api: updateJob,
    getTableList: proTable.value?.getTableList,
    enumMap: proTable.value?.enumMap
  });
};

/**
 * 执行一次
 * @param row
 */
const onRun = async (row: JobPageResult) => {
  await useHandleData(runJob, [row.id], `执行一次任务【${row.remark}】`);
};

/**
 * 暂停定时任务
 * @param row
 */
const onPause = async (row: JobPageResult) => {
  await useHandleData(pauseJob, [row.id], `暂停定时任务【${row.remark}】`);
  proTable.value?.getTableList();
};

/**
 * 恢复定时任务
 * @param row
 */
const onResume = async (row: JobPageResult) => {
  await useHandleData(resumeJob, [row.id], `恢复定时任务【${row.remark}】`);
  proTable.value?.getTableList();
};

// 删除信息
const onDelete = async (row: JobPageResult) => {
  await useHandleData(deleteJob, [row.id], `删除任务【${row.remark}】`);
  proTable.value?.getTableList();
};

// 批量删除
const batchDelete = async (ids: string[]) => {
  await useHandleData(deleteJob, ids, "删除所选信息");
  proTable.value?.clearSelection();
  proTable.value?.getTableList();
};
</script>
